<template>
  <base-breadcrumb v-loading="loading" class="subcontractors-details">
    <!-- 当作为审核中的模块时，不展示这三个按钮 -->
    <div class="btns" v-if="location === 'page'">
      <a-button type="primary" @click="handleExport" style="margin-right:10px;" :loading="exportLoading">
        导出
      </a-button>
      <BasePrintButton class="print-btn" ref="BasePrintButton" style="display: inline-block;margin-right: 10px;" type="primary" buttonText="打 印" :before-print-fn="handleBatchPrint" />
      <a-button @click="goBack('page')">
        关闭
      </a-button>
    </div>
    <!-- 意见征询的时候不显示这个组件的 关闭 按钮 -->
    <div class="btns" v-else-if="location === 'module' && $route.name !== 'solicitingOpinions'">
      <a-button @click="goBack('module')">
        关闭
      </a-button>
    </div>
    <a-card :bordered="false">
      <title-name title="基础信息" />

      <a-row :gutter="24">
        <a-col :md="16" :sm="16">
          <a-form-item label="所属单位" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <!--                    <BaseInput-->
            <!--                      v-model="dels.projectName"-->
            <!--                      disabled-->
            <!--                    />-->
            <org-tree-select disabled :value="dels.projectId"></org-tree-select>
          </a-form-item>
        </a-col>
        <!--        <a-col-->
        <!--          :md="8"-->
        <!--          :sm="8"-->
        <!--        >-->
        <!--          <a-form-item-->
        <!--            label="分公司"-->
        <!--            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
        <!--            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
        <!--          >-->
        <!--            <BaseInput-->
        <!--              v-model="dels.branchName"-->
        <!--              disabled-->
        <!--            />-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <!--        <a-col-->
        <!--          :md="8"-->
        <!--          :sm="8"-->
        <!--        >-->
        <!--          <a-form-item-->
        <!--            label="项目名称"-->
        <!--            :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"-->
        <!--            :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"-->
        <!--          >-->
        <!--            <BaseInput-->
        <!--              v-model="dels.projectName"-->
        <!--              disabled-->
        <!--            />-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <a-col :md="8" :sm="8">
          <a-form-item label="分包商名称" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="dels.subcontractorName" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="8" :sm="8">
          <a-form-item label="合作事项" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput :value="processTreeSelect(dels.matters)" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="分包商资源代表" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput :value="dels.subResourceRepresent" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="联系方式" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput :value="dels.contactInformation" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="拟进场时间" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="dels.planEntryDate" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="定标时间" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="dels.calibrationTime" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="实际进场时间" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="dels.entryTime" disabled />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="8" :sm="8">
          <a-form-item label="定标文件" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <span v-if="dels.calibration != null" class="lineHeight">
              <l-table :is-close="isClose" :upload-arrys.sync="dels.calibration" />
            </span>
            <span v-if="dels.calibration == null" class="lineHeight-A">
              无
            </span>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="现场审批表" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <span v-if="dels.approve != null" class="lineHeight">
              <l-table :is-close="isClose" :upload-arrys.sync="dels.approve" />
            </span>
            <span v-if="dels.approve == null" class="lineHeight-A">
              无
            </span>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="拟出场时间" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="dels.planAppearanceDate" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="实际出场时间" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <BaseInput v-model="dels.outTime" disabled />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="8">
          <a-form-item label="出场审批表" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <span v-if="dels.exitApproval != null" class="lineHeight">
              <l-table :is-close="isClose" :upload-arrys.sync="dels.exitApproval" />
            </span>
            <div v-if="dels.exitApproval == null" class="lineHeight-A">
              无
            </div>
          </a-form-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-item label="履约情况及进度" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <a-textarea disabled v-model="dels.performanceProgress" :auto-size="{ minRows: 2, maxRows: 6 }" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :md="24" :sm="24">
          <a-form-item label="分部分项" :label-col="{ lg: { span: 7 }, sm: { span: 7 } }" :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }">
            <!-- 这个地方直接绑定选项名的汉字(description) -->
            <PartialTreeSelect
              :value="dels.partialAllNameList"
              :tree-data="partialTree"
              disabled
              :replace-fields="{
                children: 'childrenLabelVO',
                title: 'name',
                key: 'id',
                label: 'id',
                value: 'description'
              }"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <!--<title-name title="关联WBS"></title-name>-->

      <!--<div style="margin-bottom: 20px">-->
      <!--<a-button type="" @click="associateDetails">关联WBS详情</a-button>-->
      <!--</div>-->

      <!--<a-table bordered :pagination="false" :columns="columns" :data-source="data">-->
      <!--<span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>-->
      <!--</a-table>-->

      <a-modal v-model="visible" title="关联WBS" :width="1400">
        <template slot="footer">
          <a-button @click="handCancel">
            关闭
          </a-button>
        </template>
        <a-form-model>
          <a-table bordered :pagination="false" :columns="columnWbs" :data-source="datasource">
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          </a-table>
        </a-form-model>
      </a-modal>
    </a-card>
  </base-breadcrumb>
</template>

<script>
import axios from 'axios'
import ARow from 'ant-design-vue/es/grid/Row'

import { STable, Ellipsis } from '@/components'
import { getSubcontractorsOne, partialList } from '@/api/subcontractors/standing'
import { planProducer } from '@/api/config'
import { printEntryExitLedger } from '@/api/subcontractors/subcontractors'

import PartialTreeSelect from './components/PartialTreeSelect.js'

const columns = [
  {
    title: '序号',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '工程',
    dataIndex: 'subcontractors'
  },
  {
    title: '类型',
    dataIndex: 'type'
  },
  {
    title: '周期',
    dataIndex: 'cycle'
  },

  {
    title: '计划开始时间',
    dataIndex: 'startTime'
  },
  {
    title: '计划结束时间',
    dataIndex: 'endTime'
  }
]
const columnWbs = [
  {
    title: '序号',
    dataIndex: 'index'
  },
  {
    title: '阶段/类别',
    dataIndex: 'name'
  },
  {
    title: '业务事项',
    dataIndex: 'businessMatters'
  },
  {
    title: '管控级别',
    dataIndex: 'level'
  },
  {
    title: '周期',
    dataIndex: 'duration'
  },
  {
    title: '计划开始时间',
    dataIndex: 'startTime'
  },
  {
    title: '计划结束时间',
    dataIndex: 'endTime'
  },
  {
    title: '前置任务',
    dataIndex: ''
  },
  {
    title: '间隔时间',
    dataIndex: ''
  },
  {
    title: '完成标准',
    dataIndex: 'completeStandard'
  },
  {
    title: '验证资料',
    dataIndex: 'verifyDoc'
  },
  {
    title: '第一责任人',
    dataIndex: 'firstResponsible'
  },
  {
    title: '直接责任人',
    dataIndex: 'responsible'
  }
]
export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    PartialTreeSelect
  },
  data() {
    return {
      columns,
      columnWbs,
      visible: false,
      loading: false,
      isClose: false,

      data: [],
      datasource: [], // wbs

      dels: {}, // 获取分包商管理基本信息对象
      totalDels: {},
      queryParams: {},
      // 分部分项树
      partialTree: [],
      /**
       * 当前详情可能出现在
       * 1、分包商进出场台账 - 作为详情页面
       * 2、审批时，作为模块展示
       */
      location: 'page',
      exportLoading: false
    }
  },

  created() {
    // 见字段解释
    const list = [
      'subcontractorsEntryReview', //  分包商进场审批
      'subcontractorsExitReview', //  分包商出场审批
      'solicitingOpinions' //  意见征询
    ]
    if (list.includes(this.$route.name)) {
      this.location = 'module'
    }

    const _id = this.$route.query.id
    this.id = _id.includes('_') ? _id.split('_')[0] : _id

    this.getSubcontractorsOne()

    this.getPartialTree()
  },
  computed: {},
  methods: {
    processTreeSelect(val) {
      if (val) {
        try {
          let r = JSON.parse(val)
          return r.map(v => v.label).join(',')
        } catch (e) {
          return val
        }
      }
      return ''
    },
    async getPartialTree() {
      let res = await partialList()
      if (res.code === 200) {
        this.partialTree = res.data
      }
    },
    // 导出
    async handleExport() {
      const params = this.$route.query
      this.exportLoading = true

      axios({
        method: 'post',
        url: planProducer + '/sub/doc-export',
        params,
        responseType: 'arraybuffer'
      })
        .then(res => {
          let blob = new Blob([res.data], { type: 'application/xls' })
          let link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = '台账批量导出.zip'
          link.click()
          link = null
        })
        .finally(() => (this.exportLoading = false))
    },
    // 批量打印
    async handleBatchPrint() {
      try {
        this.$refs.BasePrintButton.loadingState.isPrint = true
        const id = this.$route.query.id
        const res = await printEntryExitLedger(id)
        return res.data.content
      } catch (error) {
        this.$warning('打印失败')
        return Promise.reject(error)
      } finally {
      }
    },
    // 关闭
    goBack(type) {
      if (type === 'page') {
        this.$router.push({ path: '/subcontractors/list' })
        return
      }
      if (type === 'module') {
        window.close()
        return
      }
    },
    associateDetails() {
      this.visible = true
    },

    handCancel() {
      this.visible = false
    },
    async getSubcontractorsOne() {
      this.loading = true
      let res = await getSubcontractorsOne({ id: this.id })
      console.log(res)
      this.loading = false
      this.dels = res.data
    }
  }
}
</script>
<style lang="less" scoped>
.subcontractors-details {
  .lineHeight {
    line-height: 35px;
  }

  .lineHeight-A {
    line-height: 35px;
    position: absolute;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
    position: fixed;
    top: 111px;
    right: 10px;

    .print-btn {
      /deep/ .ant-btn {
        padding: 0 15px !important;
      }
    }
  }
}
</style>
